<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #canvas{
            /*width: 300px;
            height: 300px;*/
            background: lightcyan;
            border: 1px solid grey;
        }
    </style>
</head>
<body>
    <h3>如何创建canvas面板</h3>
    <p>
        <canvas id="canvas"></canvas>
    </p>

</body>
<script>
    //document.onload it is called when DOM is ready
    //window.onload By default, it is fired when the entire page loads,including DOM and its content(images\css\script\etc.)
    window.onload= function () {
        console.log("Dom loaded");
        var canvas = document.getElementById('canvas');
        canvas.width=1000;
        canvas.height=600;
        //在canvas context上下文中开始回执
        var ctx = canvas.getContext('2d');
        ctx.fillStyle='pink';
        ctx.fillRect(100,100,100,200);
    }
</script>
</html>